<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>文件搜索页</title>
    <link rel="icon" type="image/x-icon" href="/images/logoRed.ico">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/formSelects-v4.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/common.css}">
    <!--标签插件-->
    <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/js/jquery-tags-input/jquery.tagsinput.min.css">
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
    <!-- end 标签插件   -->
</head>
<body>
<div th:replace="include/pagination::header"></div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>文件搜索页</legend>
            </fieldset>
        </div>
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 90px;">文件名/关键字</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <div class="lyear-layout-sidebar-scroll">
                        </div>
                        <!--页面主要内容-->
                        <div class="card-body">
                            <input class="form-control js-tags-input layui-input" autocomplete="off"  id="example-tags" name="extendedFieldList" placeholder="回车生成标签">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">文件类型</label>
                    <div class="layui-input-block">
                        <div th:each="fileType:${fileTypes}" >
                            <input type="checkbox" name="fileType" lay-skin="primary" th:title="${fileType.fileTypeName}" th:value="${fileType.fileTypeId}">
                            <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
                                <span>[[${fileType.fileTypeName}]]</span><i class="layui-icon layui-icon-ok"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">修改日期</label>
                        <div class="layui-input-inline">
                            <input type="text" id="modifyDateBegin"   placeholder="起"  class="layui-input">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" id="modifyDateEnd"   placeholder="止" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-useradmin" id="query" data-type="reload" lay-submit lay-filter="LAY-user-front-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
        </div>
        <div class="layui-card-body">
            <div class="layui-row layui-col-space20">
                <div class="layui-col-md8">
                    <div class="layui-row grid-demo">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                            <legend>文件列表</legend>
                        </fieldset>
                        <table class="layui-table" lay-skin="line" id="table1" lay-filter="table1"></table>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-row grid-demo grid-demo-bg1">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                            <legend>文件夹列表</legend>
                        </fieldset>
                        <table class="layui-table" lay-skin="line" id="table2" lay-filter="table2"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/static/layuiadmin/layui/layui.all.js}"></script>
<script th:src="@{/static/js/formSelects-v4.js}"></script>
<script th:src="@{/static/js/jquery.js}"></script>
<!--标签插件-->
<script type="text/javascript" th:src="@{/static/js/perfect-scrollbar.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/jquery-tags-input/jquery.tagsinput.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/main.min.js}"></script>
<!--end 标签插件-->
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['layer', 'table', 'element','form','util','upload','laydate'], function(){
        var  layer = layui.layer //弹层
            ,table = layui.table //表格
            ,element = layui.element //元素操作
            ,form = layui.form
            ,laydate = layui.laydate
            ,util=layui.util
            ,upload=layui.upload;
        form.render('checkbox');
        //日期时间范围
        laydate.render({
            elem: '#modifyDateBegin'
            ,type: 'date'
        });
        laydate.render({
            elem: '#modifyDateEnd'
            ,type: 'date'
        });
        table.render({
            elem: '#table1'
            ,skin: 'line' //行边框风格
            ,even: true //开启隔行背景
            ,url:'getFileDetails?isDir=0'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [
                [
                {field:'fileId', hide:true, title: 'ID', sort: true}
                ,{field:'',title: '类型',width:60,templet:function(d){
                        if(d.isImg)
                            return  '<img src="'+d.filePath+'"/>';
                        else
                            return  '<img style="width:30px;height:30px;" src="images/fti/'+d.fileExtension+'.png"/>';
                    }}
                ,{field:'',title: '名称/路径',templet:function(d){
                        if(d.fileName == null )
                            return '暂无';
                        else
                            return '<h2>'+d.fileName+'</h2>'+'<br/>'+'<h5>'+d.filePath+'</h5>';
                    }}
                  ,{field:'', width:180, title: '日期/大小',templet:function(d){
                        if(d.modifyDate == null )
                            return '暂无';
                        else
                            return '<h4>'+d.modifyDate+'</h4>'+'<br/>'+'<h5>'+d.fileSizeMB+'MB</h5>';
                    }}
            ]
            ]
            ,id: 'table1'
        });
        table.render({
            elem: '#table2'
            ,skin: 'line' //行边框风格
            ,even: true //开启隔行背景
            ,url:'getFileDetails?isDir=1'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [
                [
                    {field:'fileId', hide:true, title: 'ID', sort: true}
                    ,{field:'',title: '类型',width:60,templet:function(d){
                        if(d.isImg)
                            return  '<img src="'+d.filePath+'"/>';
                        else
                            return  '<img style="width:30px;height:30px;"  src="images/fti/'+d.fileExtension+'.png"/>';
                            //return  '<img style="width:30px;height:30px;"  src="images/fti/dir.png"/>';
                    }}
                    ,{field:'',title: '名称/路径',templet:function(d){
                        if(d.fileName == null )
                            return '暂无';
                        else
                            return '<h2>'+d.fileName+'</h2>'+'<br/>'+'<h5>'+d.filePath+'</h5>';
                    }}
                    ,{field:'', width:180, title: '日期/大小',templet:function(d){
                        if(d.modifyDate == null )
                            return '暂无';
                        else
                            return '<h4>'+d.modifyDate+'</h4>'+'<br/>'+'<h5>'+d.fileSizeMB+'MB</h5>';
                    }}
            ]
            ]
            ,id: 'table2'
        });
        //监听行单击事件（双击事件为：rowDouble）
        table.on('row(table1)', function(obj){
            var data = obj.data;
            // layer.alert(JSON.stringify(data), {
            //     title: '当前行数据：'
            // });
            var index=layer.open({
                type: 2,
                title: '文件信息',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area : ['1200px' , '960px'],
                content: 'details.htm/'+data.fileId,
                end:function(){

                }
            });
            //layer.full(index);
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });
        //监听行单击事件（双击事件为：rowDouble）
        table.on('row(table2)', function(obj){
            var data = obj.data;
            var index=layer.open({
                type: 2,
                title: '文件夹信息',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area : ['1200px' , '960px'],
                content: 'folder.htm/'+data.fileId,
                end:function(){
                    //location.reload();//弹出层结束后，刷新主页面
                }
            });
            //layer.full(index);
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });
        //重载
        var $ = layui.$, active = {
            reload: function(){//查询条件
                var chk_value ='';//定义一个数组
                $('input[name="fileType"]:checked').each(function(){//遍历每一个名字为nodes的复选框，其中选中的执行函数
                    chk_value+=$(this).val();//将选中的值添加到数组chk_value中
                    chk_value+=",";
                });
                var key = $("input[name=extendedFieldList]").val(),//关键字
                    modifyDateBegin=$("#modifyDateBegin").val(),//修改日期begin
                    modifyDateEnd=$("#modifyDateEnd").val(),//修改日期end
                    //filetype=$("input:checkbox[name='fileType']:checked").val();//文件扩展名
                    filetype=chk_value.substring(0,chk_value.length-1);
                var flag='false';
                if(key!="" || modifyDateBegin!="" || modifyDateEnd!="" || filetype!=""){
                    flag='true';
                }
                //执行重载
                table.reload('table1', {
                    where: {
                        flag:flag,
                        isDir:0,
                        extendedFieldList:key,
                        modifyBeginTime:modifyDateBegin,
                        modifyEndTime:modifyDateEnd,
                        fileTypeIds:filetype
                    }
                });
                //执行重载
                table.reload('table2', {
                    where: {
                        flag:flag,
                        isDir:1,
                        extendedFieldList:key,
                        modifyBeginTime:modifyDateBegin,
                        modifyEndTime:modifyDateEnd,
                        fileTypeIds:filetype
                    }
                });
            }
        };
        //多条件查询
        $('#query').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //查询全部,清空查询条件
        $('#queryall').on('click', function(){
            var key = $("input[name=extendedFieldList]").val(""),//关键字
                modifyDateBegin=$("#modifyDateBegin").val(""),//修改日期begin
                modifyDateEnd=$("#modifyDateEnd").val(""),//修改日期end
                filetype=$("input:checkbox[name='fileType']:checked").val();//文件扩展名
                det=$('.layui-unselect').val("");
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>
